<template>
	<view class="container">
		<u-navbar
			title="意见反馈"
			:autoBack="true"
			fixed
			placeholder
		></u-navbar>
		
		<view class="content">
			<view class="form-item">
				<view class="label">反馈类型</view>
				<view class="input-wrap">
					<u-dropdown>
						<u-dropdown-item v-model="feedbackType" :title="feedbackTypeLabel" :options="feedbackTypeOptions"></u-dropdown-item>
					</u-dropdown>
				</view>
			</view>
			
			<view class="form-item">
				<view class="label">反馈内容</view>
				<view class="input-wrap">
					<u-textarea
						v-model="content"
						placeholder="请描述您遇到的问题或建议..."
						height="200"
						count
						maxlength="500"
					></u-textarea>
				</view>
			</view>
			
			<view class="form-item">
				<view class="label">上传截图（选填）</view>
				<view class="input-wrap">
					<u-upload
						:fileList="fileList"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="6"
					></u-upload>
				</view>
			</view>
			
			<view class="form-item">
				<view class="label">联系方式（选填）</view>
				<view class="input-wrap">
					<u-input
						v-model="contact"
						placeholder="请留下您的联系方式，便于我们与您沟通"
						border="bottom"
					></u-input>
				</view>
			</view>
			
			<view class="submit-btn-wrap">
				<u-button type="primary" @click="submitFeedback">提交反馈</u-button>
			</view>
		</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import tools from '@/mixin/tools.js'
	
	export default {
		mixins: [tools],
		data() {
			return {
				feedbackType: 0,
				feedbackTypeOptions: [
					{
						label: '功能建议',
						value: 0
					},
					{
						label: '缺陷问题',
						value: 1
					},
					{
						label: '体验问题',
						value: 2
					},
					{
						label: '其他',
						value: 3
					}
				],
				content: '',
				fileList: [],
				contact: ''
			}
		},
		computed: {
			feedbackTypeLabel() {
				const selected = this.feedbackTypeOptions.find(item => item.value === this.feedbackType)
				return selected ? selected.label : '请选择反馈类型'
			}
		},
		onLoad() {
			console.log('反馈页面加载')
		},
		methods: {
			afterRead(event) {
				// 获取上传的图片
				const files = [].concat(event.file)
				// 这里处理图片上传，实际开发中可能需要调用上传API
				files.forEach(item => {
					this.fileList.push({
						url: item.url,
						status: 'uploading',
						message: '上传中'
					})
					// 模拟上传过程
					setTimeout(() => {
						const index = this.fileList.findIndex(file => file.url === item.url)
						this.fileList[index].status = 'success'
						this.fileList[index].message = '上传成功'
					}, 1000)
				})
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			submitFeedback() {
				if (!this.content.trim()) {
					this.$refs.uToast.show({
						title: '请输入反馈内容',
						type: 'warning'
					})
					return
				}
				
				// 模拟提交操作
				uni.showLoading({
					title: '提交中...'
				})
				
				setTimeout(() => {
					uni.hideLoading()
					this.$refs.uToast.show({
						title: '反馈提交成功',
						type: 'success'
					})
					
					// 重置表单
					setTimeout(() => {
						this.feedbackType = 0
						this.content = ''
						this.fileList = []
						this.contact = ''
						
						// 返回上一页
						uni.navigateBack()
					}, 1500)
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
	}
	
	.content {
		padding: 20rpx;
	}
	
	.form-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		
		.label {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
			font-weight: bold;
		}
		
		.input-wrap {
			position: relative;
		}
	}
	
	.submit-btn-wrap {
		margin-top: 60rpx;
		padding: 0 20rpx;
	}
</style> 